|
前言：
openlayer实现虚线、实线效果的不同切换
实现效果：
实现步骤：
1、虚线的方法：
lineDash数组可以任意长度，它的奇数代表线的长度，偶数代表间隙长度。通过这个规则，就可以画出各种规则的虚线，如以下效果： 再举个例子：lineDash: [20, 10, 40, 20]
具体代码：
//虚线
var styleFunction2 = function (feature) {
var styles = [
new ol.style.Style({ // 线串的样式
stroke: new ol.style.Stroke({
color: '#0509f0',
width: 2,
lineDash: [20, 10, 20, 10],
})
})
];
// 对线段的每一个子线段都设置箭头样式
return styles;
};
2、实线的方法：
//实线
var styleFunction1 = function (feature) {
var styles = [
new ol.style.Style({ // 线串的样式
stroke: new ol.style.Stroke({
color: '#0509f0',
width: 2
})
})
];
// 对线段的每一个子线段都设置箭头样式
return styles;
};
3、相关所有的代码：
//------------------------定义样式------------------------
//实线
var styleFunction1 = function (feature) {
var styles = [
new ol.style.Style({ // 线串的样式
stroke: new ol.style.Stroke({
color: '#0509f0',
width: 2
})
})
];
// 对线段的每一个子线段都设置箭头样式
return styles;
};
//虚线
var styleFunction2 = function (feature) {
var styles = [
new ol.style.Style({ // 线串的样式
stroke: new ol.style.Stroke({
color: '#0509f0',
width: 2,
lineDash: [20, 10, 20, 10],
})
})
];
// 对线段的每一个子线段都设置箭头样式
return styles;
};
//------------------------定义图层------------------------
var zhuanti_tuxing_source = new ol.source.Vector();
//------------------------定义具体图层------------------------
var zhuanti_tuxing_layer_dasher = new ol.layer.Vector({
source: zhuanti_tuxing_source,
style: styleFunction2
});
var zhuanti_tuxing_layer_solid = new ol.layer.Vector({
source: zhuanti_tuxing_source,
style: styleFunction1
});
//------------------------页面上button------------------------
实线
虚线
//------------------------页面上button按钮点击方法------------------------
var changeLineType = function (type) {
//清理图层的其他效果，试具体需要换成你自己的
zhuanti_tuxing_layer.getSource().clear();
map.removeLayer(zhuanti_tuxing_layer);
map.removeInteraction(zhuanti_tuxing_draw);
//核心方法，根据你的按钮，选择你的图层
if(type === 1){
zhuanti_tuxing_layer = zhuanti_tuxing_layer_dasher
}else{
zhuanti_tuxing_layer = zhuanti_tuxing_layer_solid
}
//地图上添加你的图层
map.addLayer(zhuanti_tuxing_layer);
}
|